<!--打开形象 抽屉-->
<template>
  <el-drawer size="90%"
             title="选择商品"
             :append-to-body="true"
             :before-close="handleClose"
             :visible.sync="visible">

    <el-card shadow="never">
      <el-row :gutter="15"
              class="flex-wrap "
              style="padding: 20px;background-color: #fff">
        <!--        <el-radio-group v-model="isShow">-->
        <el-col :xs="8"
                :sm="6"
                :lg="4"
                :xl="4"
                v-for="(i,j) in list"
                :key="j">
          <!-- mouseover _鼠标事件，暂隐藏 -->
          <div class="relative"
               v-on:mouseover="hover=j"
               v-on:mouseleave="hover=-1"
               @click="mouseClick(i.id)">
            <!--              <el-radio :label="i.id" class="radio-cls">{{''}}</el-radio>-->
            <div class="flex-column all-padding"
                 :style="isShow==i.id ? 'background-color: #e8f1ff;border: 1px solid #4190ff;':''">

              <img class="hostImg"
                   :src="i.host_img[0]" />
              <!--圆角三角形-->
              <div class="triangle-cls"
                   v-if="isShow==i.id"></div>
              <div class="title font-overflow">{{i.name}}</div>
              <div class="title-border"></div>
              <span class="color999 fontSize12 font-overflow2 line-height20"
                    style="height: 40px;width: 100%;text-align: center;">{{i.title}}</span>
              <div class="flex-align-center width100">
                <div class="flex-column around-class">
                  <span>库存</span>
                  <div>{{i.inventory  }}</div>
                </div>
                <el-divider direction="vertical"></el-divider> <!--分割线-->
                <div class="flex-column around-class">
                  <span>销量</span>
                  <div>{{ i.sales_volume }}</div>
                </div>
              </div>
              <div class="flex-column around-class">
                <span>价格</span>
                <div>{{ i.price }}</div>
              </div>
            </div>
            <el-button class="release-btn flex pointer"
                       :style="isShow==i.id ? 'display:flex;':'display:none'"
                       @click="confirm(i)">确定</el-button>

          </div>
        </el-col>
        <!--        </el-radio-group>-->
      </el-row>
      <el-pagination background
                     layout="prev, pager, next,jumper, ->, total"
                     :total="listCount"
                     @current-change="handleCurrentChange"
                     :current-page="form.page"
                     :page-size="form.limit"
                     style="text-align: center">
      </el-pagination>
    </el-card>
  </el-drawer>
</template>
  
  <script>

import { goodsList } from '@/api/goodsList/index'
// import { queryImagePage } from "@/api/digitalHumanManagement/imageDisplay";
export default {
  name: "open-image",
  props: {

  },
  data () {
    return {
      // 弹窗是否打开
      visible: false,
      isShow: 0,
      hover: -1,
      currentPage: 1,
      list: [],
      listCount: 0,
      form: {
        page: 1,
        limit: 6,
        status: 1
      }
    }
  },
  methods: {
    // 点击开票，选择形象
    mouseClick (index) {
      this.isShow = index
      console.log('this.isShow', this.isShow)
    },
    show () {
      this.updateVisible(true)
      this.queryImage()
    },
    // 查询形象
    queryImage () {
      goodsList(this.form)
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.list = res.data.list
            console.log(this.list)
            this.list.forEach((item) => {
              item.host_img = item.host_img.split(',').map((item) => item.trim());
            })
            /*this.list.forEach((item) => {
            this.$set(item, 'isShow', false)
            })*/
            this.listCount = res.data.count

          }

        })
        .catch((e) => {
          this.$message.error(e);
        });
    },

    //点击按钮切换页面
    handleCurrentChange (currentPage) {
      this.form.page = currentPage; //每次点击分页按钮，当前页发生变化
      this.queryImage()
      console.log('this.currentPage)', this.currentPage);
    },

    /*确定*/
    confirm (e) {
      console.log("确定", e)
      this.$emit('getImage', e)
      this.updateVisible(false)

    },

    /* 更新 visible */
    updateVisible (value) {
      console.log("value", value)
      this.visible = value
      this.isShow = 0 // 关闭弹框的同时，清除选中状态

    },

    handleClose (done) {
      done();
      /*this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});*/
    },
  }
}
  </script>
  
  
  <style scoped lang="less">
.radio-cls {
  position: absolute;
  top: 15px;
  right: -20px;
  z-index: 999;
}
.hostImg {
  width: 89px;
  height: 89px;
}
.triangle-cls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  width: 18px;
  height: 18px;
  background: linear-gradient(
    225deg,
    #4190ff,
    #4190ff 53%,
    transparent 44%,
    transparent 100%
  ) !important;
  border-top-right-radius: 10px;
  /*background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%) !important;*/
}

.all-padding:hover {
  /*background-color: #e8f1ff;*/
  border: 1px solid #4190ff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*box-shadow:inset 0px 0px 10px 20px #f7f7f7;*/ // 内阴影
  /*box-shadow: 0px 0px 10px 20px #f7f7f7;*/ // 外阴影
}
.all-padding {
  border: 1px solid #fff;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px #0000000f;
  margin-bottom: 20px;
  border-radius: 10px;
  img {
    max-height: 350px;
    /*background-color: #000000;*/
    /*width: 100%;*/
    margin-bottom: 20px;
  }
  .title {
    font-size: 14px;
    color: #000;
    width: 100%;
    text-align: center;
  }
  .title-border {
    border-bottom: 1px solid #000;
    width: 27px;
    margin: 10px 0;
  }
  .around-class {
    padding: 15px 0;
    width: calc(100% / 2);
    span {
      color: #666;
      font-size: 12px;
    }
    div {
      margin-top: 15px;
      color: #1e6ceb;
      font-size: 14px;
    }
  }
}

.release-btn {
  z-index: 9;
  position: absolute;
  bottom: 0px;
  padding: 10px 0;
  /*width: calc(100% - 20px);*/
  width: 100%;
  background-color: #1e6ceb;
  border-radius: 0px 0px 10px 10px;
  color: #fff;
  font-size: 16px;
}
</style>
  